<!DOCTYPE html>
<html>
<head>
<style>
/* 容器样式：模拟网页中的模块布局 */
.container {
  width: 80%;
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #eee;
}

/* 标题样式 */
.phase-title {
  margin-bottom: 8px;
  font-weight: bold;
  color: #333;
}

/* 阶段进度条容器 */
.phase-bar-container {
  height: 10px;
  width: 100%;
  background-color: #f0f0f0;
  border-radius: 5px;
  overflow: hidden;
}

/* 蓝色进度条（PRECLINICAL阶段） */
.preclinical-bar {
  height: 100%;
  background-color: #4285f4; /* 模拟蓝色 */
  width: 0; /* 初始宽度为0 */
  /* 动画：2秒内从0到100%，保持最终状态 */
  animation: preclinicalLoad 2s ease-out forwards;
}

/* 定义加载动画 */
@keyframes preclinicalLoad {
  from { width: 0; }
  to { width: 100%; /* 表示PRECLINICAL阶段完成 */ }
}

/* 其他阶段样式（仅作布局参考） */
.other-phases {
  display: flex;
  margin-top: 5px;
  gap: 5px;
}

.other-phase {
  flex: 1;
  height: 6px;
  background-color: #f0f0f0;
  border-radius: 3px;
}
</style>
</head>
<body>
<div class="container">
  <div class="phase-title">PRECLINICAL</div>
  <div class="phase-bar-container">
    <div class="preclinical-bar"></div>
  </div>
  <!-- 其他阶段（灰色未激活状态） -->
  <div class="other-phases">
    <div class="other-phase">PHASE 1</div>
    <div class="other-phase">PHASE 2</div>
  </div>
</div>

<script>
// 可选：添加延迟加载效果，模拟页面滚动到可见时触发
document.addEventListener('DOMContentLoaded', () => {
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.style.animationPlayState = 'running';
      }
    });
  });
  observer.observe(document.querySelector('.preclinical-bar'));
});
</script>
</body>
</html>